<template>
  <div class="big-box">
    <div class="box-left">截至{{time}}，占</div>
    <div class="box-right">
      <div class="small-row">
        <span class="number-title">年计划量({{ numberOfYear }})</span>
        <a-progress class="number-content" :percent="percentOfYear" />
      </div>
      <div class="small-row">
        <span class="number-title">总工程量({{ numberOfTotal }})</span>
        <a-progress class="number-content" :percent="percentOfTotal" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { watch, ref, defineProps } from "vue";
import { useStore } from "vuex";

const props = defineProps({
  index: String,
  isGetData: Boolean,
});

const store = useStore();
// 时间
const time = ref('')
const numberOfYear = ref("");
const numberOfTotal = ref("");
const percentOfYear = ref("");
const percentOfTotal = ref("");
// 累计完成工程量
const number = ref("");

watch(
  () => props.isGetData,
  (newV, oldV) => {
    time.value =
      store.state.progressFilling.editProgressFillingData[
        props.index
      ].date;
    numberOfYear.value =
      store.state.progressFilling.editProgressFillingData[
        props.index
      ].njhl;
    numberOfTotal.value =
      store.state.progressFilling.editProgressFillingData[
        props.index
      ].zgcl;
    number.value =
      store.state.progressFilling.editProgressFillingData[
        props.index
      ].gcl;
    percentOfYear.value = (number.value / numberOfYear.value).toFixed(2);
    percentOfTotal.value = (number.value / numberOfTotal.value).toFixed(2);
    setTimeout(() => {
      console.log(percentOfTotal.value);
    }, 1000);
  }
);
</script>

<style lang="less" scoped>
.small-row {
  display: flex;
  .number-title {
    flex: 1;
  }
  .number-content {
    flex: 1;
  }
}
</style>
